<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<body>
<div class="layui-bg-green category_title">
    <p>分类列表</p>
    <p>添加分类</p>
</div>
<div class="category_content">
    <div class="category_content_left">
        <div id="categoryTree" class="demo-tree-more"></div>
        <div style="width: 90%;height: 10%">
            <button style="float:right;" class="layui-btn layui-btn-sm layui-btn-danger"
                    lay-demo="getChecked">删除
            </button>
            <button style="float:right;margin-right: 16px;"
                    class="layui-btn layui-btn-sm layui-btn-normal" lay-demo="reload">重置
            </button>
        </div>
    </div>
    <div class="category_content_right">
        <form id="category_from" action="admin/category/add" method="post">
            <div style="width: 50%;margin: 6% auto;height: 10%">
                <label style="float: left">
                    一级分类：
                </label>
                <label class="category_content_right_label">
                    <input id="firstCategory" type="text" required lay-verify="required"
                           placeholder="请输入内容"
                           name="firstCategory" autocomplete="off" class="layui-input">
                </label>
            </div>
            <div style="width: 50%;margin: 2% auto;height: 60%">
                <label style="float: left">
                    二级分类：
                </label>
                <label id="secondCategory" class="category_content_right_label">
                    <div>
                        <div style="width: 80%;height: 18%;float: left">
                            <input type="text" required lay-verify="required" placeholder="请输入内容"
                                   name="secondCategory" autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div>
                        <div style="width: 80%;height: 18%;float: left">
                            <input type="text" required lay-verify="required" placeholder="请输入内容"
                                   name="secondCategory" autocomplete="off" class="layui-input">
                        </div>
                        <div class="addCategory" style="width: 10%;float: left;padding: 9px 0 0 5px"
                             onclick="addOrDel(0)">
                            <i class="layui-icon"
                               style="font-size: 18px; color: #1E9FFF;">&#xe624; </i>
                        </div>
                    </div>

                </label>
            </div>
        </form>
        <div style="width: 90%;height: 10%">
            <button style="float:right;" class="layui-btn layui-btn-sm layui-btn-normal"
                    onclick="addCategory()">添加
            </button>
        </div>

    </div>
</div>
<script>
    let tree = null;
    let categoryParam = null;
    layui.use(['tree', 'util'], function () {
        tree = layui.tree
            , util = layui.util;


        $.ajax({
            type: "GET"
            , url: "http://localhost/campus/admin/category/all"
            , success: function (data) {
                categoryParam = {
                    elem: '#categoryTree'
                    , data: data.data.data
                    , showCheckbox: true  //是否显示复选框
                    , accordion: true
                    , id: 'categoryTreeId'
                    , isJump: true //是否允许点击节点时弹出新窗口跳转
                    , click: function (obj) {
                        var data = obj.data;  //获取当前点击的节点数据
                        layer.prompt({
                            title: "修改分类"
                        }, function (value, index, elem) {
                            //修改结点
                            let newCategoryName = value.trim();
                            if (newCategoryName === "") {
                                layer.msg("分类名不能为空");
                            } else {
                                let param = "id=" + data.id + "&categoryName=" + newCategoryName;
                                $.ajax({
                                    type: "POST"
                                    , url: "http://localhost/campus/admin/category/update"
                                    , data: param
                                    , success: function (data) {
                                        let icon = 0;
                                        if (data.success) {
                                            icon = 1;
                                            categoryParam.data = data.data.data;
                                            tree.reload("categoryTreeId", categoryParam);
                                        } else {
                                            icon = 2
                                        }
                                        layer.msg(data.message, {
                                            icon: icon,
                                            time: 1000
                                        });
                                    }
                                });
                                layer.close(index);
                            }
                        });
                    }
                };
                tree.render(categoryParam);
            }
            , error: function (e) {
                alert(e)
            }
        });

        //按钮事件
        util.event('lay-demo', {
            getChecked: function () {
                //获取选中节点的数据
                let checkedData = tree.getChecked('categoryTreeId');
                let allID = "";
                for (let i = 0; i < checkedData.length; i++) {
                    let children = checkedData[i].children;
                    if (children.length === 0) {
                        allID += checkedData[i].id + ",";
                    }
                    for (let j = 0; j < children.length; j++) {
                        allID += children[j].id + ",";
                    }
                }
                allID = allID.substring(0, allID.length - 1);

                //确定是否删除
                layer.confirm('确定删除所选分类吗?', {icon: 3, title: '提示'}, function (index) {
                    $.ajax({
                        type: "POST"
                        , data: "allID=" + allID
                        , url: "http://localhost/campus/admin/category/delete"
                        , success: function (data) {
                            let icon = 0;
                            if (data.success) {
                                icon = 1;
                                categoryParam.data = data.data.data;
                                tree.reload("categoryTreeId", categoryParam);
                            } else {
                                icon = 2
                            }
                            layer.msg(data.message, {
                                icon: icon,
                                time: 1000
                            });
                        }
                    });
                    layer.close(index);
                });
            }
            , reload: function () {
                //重载实例
                tree.reload("categoryTreeId", categoryParam);
            }
        });
    });

    var layer = "";
    layui.use('layer', function () {
        layer = layui.layer;
        var success = "${sessionScope.backMessage.success}";

        if (success !== "") {
            let icon = 0;
            if (success === "true") icon = 1;
            else icon = 2;
            layer.msg("${sessionScope.backMessage.message}", {
                icon: icon,
                time: 1000
            });
            <%
            session.removeAttribute("backMessage");
            %>
        }
    });


    //添加或删除input标签
    function addOrDel(dex) {
        var len = $(".addCategory").length;
        var curDom = $(".addCategory").children('i')[dex];
        if (len > 4) {
            layer.msg("最多一次添加6个", {
                time: 1000
            });
            return;
        }
        if (dex === len - 1) {
            $(curDom).replaceWith("<i class=\"layui-icon\" style=\"font-size: 18px; color: #ff4136;\">&#xe67e; </i>");
            $("#secondCategory").append('<div> <div style="width: 80%;height: 18%;float: left"> <input type="text" name="secondCategory" required lay-verify="required" placeholder="请输入内容" autocomplete="off" class="layui-input"></div>' +
                '<div class="addCategory" style="width: 10%;float: left;padding: 9px 0 0 5px"onclick="addOrDel(' + len + ')"><i class="layui-icon" style="font-size: 18px; color: #1E9FFF;">&#xe624; </i> </div>  </div>')
        } else {
            $(curDom).parent().parent().remove();
            $(".addCategory").each(function (index) {
                // alert("dex = " + dex + "  index=" + index);
                if (index >= dex) {
                    $(this).removeAttr("onclick");
                    $(this).attr("onclick", "addOrDel(" + index + ")");
                    // alert("delete");
                }
            })
        }
    }

    //添加分类事件
    function addCategory() {
        var first = $("#firstCategory").val();
        if (first === "") {
            layer.msg("一级分类不能为空", {
                time: 1000
            });
            return;
        }

        let right = true;
        $("[name='secondCategory']").each(function () {
            if ($(this).val() === "") {
                right = false;
                layer.msg("所选字段不能为空值", {
                    time: 1000
                });
                return false;
            }
        });
        if (right) {
            let data = $("#category_from").serializeArray();
            let firstCategory = "";
            let secondCategory = [];
            for (let i = 0; i < data.length; i++) {
                if (data[i].name === 'firstCategory')
                    firstCategory = data[i].value;
                else {
                    secondCategory.push(data[i].value)
                }
            }
            let param = "firstCategory=" + firstCategory + "&secondCategory=" + secondCategory;
            console.log(param);
            $.ajax({
                type: "POST"
                , data: param
                , url: "http://localhost/campus/admin/category/add"
                , success: function (data) {
                    let icon = 0;
                    if (data.success) {
                        icon = 1;
                        categoryParam.data = data.data.data;
                        tree.reload("categoryTreeId", categoryParam);
                    } else {
                        icon = 2
                    }
                    layer.msg(data.message, {
                        icon: icon,
                        time: 1000
                    });
                }
            });
        }
        // $("#category_from").submit();
    }
</script>
</body>
</html>
